/**
  * @Description: WoShop商城
  * @Author: 梧桐
  * @Copyright: 武汉一一零七科技有限公司©版权所有
  * @Link: www.wo-shop.net
  * @Contact: QQ:2487937004
  */
<template>
  <view class="index_class">
    <view class="order-deta">
      <!-- 头部商品信息 -->
      <view class="fresh_list">
        <view class="order_bottom">
          <view class="order_number">
            <text>{{orderInfo.order_number}}</text>
            <text class="color">{{orderInfo.order_zt}}</text>
          </view>
          <view class="bottom_img" v-for="(time2,index) in orderInfo.goodsinfo" :key="index">
            <image :src="time2.thumb_url" />

            <view style="padding:0 40upx 0 20upx;flex:1">
              <view class="introduce">{{time2.goods_name}}</view>
              <view class="arrt-str">{{time2.goods_attr_str}}</view>
            </view>
            <view style="font-size:24upx;text-align:right">
              <view class="shou_sure" v-if="orderInfo.filter == 2  || orderInfo.filter == 3">
                <view v-if="orderInfo.pinzhuangtai !== 1">
                  <view v-if="time2.th_status == 0 || time2.th_status == 8"></view>

                  <view v-else-if="time2.th_status != 0">
                    <span>
                      <text v-if="time2.th_status == 1 || time2.th_status== 2">{{$t('退款中')}}</text>
                      <text v-else-if="time2.th_status == 3">{{$t('商家拒绝申请')}}</text>
                      <text v-else-if="time2.th_status == 4">{{$t('退款完成')}}</text>
                      <text v-else-if="time2.th_status == 5 || time2.th_status == 6">{{$t('换货中')}}</text>
                      <text v-else-if="time2.th_status == 7">{{$t('商家拒绝申请')}}</text>
                    </span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="or_number">
          <!-- <view class="number_text">
                        实付金额:<text>¥{{orderInfo.goods_price}}</text> <i class="iconfont order_all_right"></i>
          </view>-->

          <view class="number_sure" v-if="orderInfo.filter == 1">
            <span @click="cancellation">{{$t('取消订单')}}</span>
            <!-- <span @click="getnav('/pagesB/my/logistics')">查看物流</span> -->
            <span class="payment_order" @click.stop="hidePopup">付款</span>
          </view>
        </view>
      </view>

      <!--  收货人信息  地址   -->
      <view class="phone">
        <view class="tap_address">
          <view>
            {{orderInfo.contacts}}
            <text style="padding-left:30upx">{{orderInfo.telephone}}</text>
          </view>
          <text>{{orderInfo.province + orderInfo.city + orderInfo.area + orderInfo.address}}</text>
        </view>
        <!-- <image class="p_bottom" src="/static/images/img/address_img.png" /> -->
      </view>

      <view class="order_list">
        <view class="order-name">
          <text>{{$t('支付方式')}}</text>
          <text class="color">{{orderInfo.paytype}}</text>
        </view>
        <view class="order-name">
          <text>{{$t('宝贝金额')}}</text>
          <text class="color">¥ {{orderInfo.goods_price}}</text>
        </view>
        <view class="order-name">
          <text>{{$t('物流公司')}}</text>
          <text class="color">{{orderInfo.logistics}}</text>
        </view>
        <view class="order-name">
          <text>{{$t('物流单号')}}</text>
          <text class="color">{{orderInfo.psnum}}</text>
        </view>
        <view class="order-name">
          <text>{{$t('运费（快递）')}}</text>
          <text class="color">¥ {{orderInfo.freight}}</text>
        </view>

        <view class="order-name">
          <text>{{$t('优惠券')}}</text>
          <text class="color">减{{orderInfo.coupon_price}}元</text>
        </view>

        <view class="order-name">
          <text>{{$t('优惠信息')}}</text>
          <text class="color">{{orderInfo.coupon_str}}</text>
        </view>
        <view class="order-name">
          <text>{{$t('实付金额')}}</text>
          <text class="color">¥{{orderInfo.total_price}}</text>
        </view>
      </view>

      <view class="order_list order-list-info" style="margin:20upx 0 60upx 0;">
        <view>
          <text>{{$t('订单编号')}}:</text>
          <text class="color">{{orderInfo.ordernumber}}</text>
          <text @click="getClipboardData">{{$t('复制')}}</text>
        </view>
        <view>
          <text>{{$t('交易编号')}}:</text>
          <text class="color">{{orderInfo.order_number}}</text>
        </view>
        <view>
          <text>{{$t('创建时间')}}</text>
          <text class="color">{{orderInfo.addtime}}</text>
        </view>
        <view v-if="orderInfo.filter == 2 || orderInfo.filter == 3 || orderInfo.filter == 4">
          <text>{{$t('付款时间')}}</text>
          <text class="color">{{orderInfo.pay_time}}</text>
        </view>
        <view v-if="orderInfo.filter == 3 || orderInfo.filter == 4">
          <text>{{$t('发货时间')}}</text>
          <text class="color">{{orderInfo.fh_time}}</text>
        </view>
        <view v-if="orderInfo.filter == 4">
          <text>{{$t('收货时间')}}</text>
          <text class="color">{{orderInfo.coll_time}}</text>
        </view>
      </view>
 
    </view>
  </view>
</template>

<script>
import { setTimeout } from "timers";
export default {
  data() {
    return {
      orderInfo: {}, // 订单详情
      valShow: false,
      valueStatus: 0, // 更新页面状态 防止页面卡死
      order_num: ""
    };
  },

  onLoad(option) {
    this.getOrderNum(option);
    this.getRoleOrderInfo();
    this.setClipboardData(this.order_num);
  },
  methods: {
    getOrderNum(option) {
      this.order_num = option.order_num;
      console.log(`订单号为${this.order_num}`);
    },
    // 设置剪贴板内容
    setClipboardData(data) {
      uni.setClipboardData({
        data: data,
        success: function() {
          console.log(data);
        }
      });
    },
    getClipboardData() {
      uni.getClipboardData({
        success: function(res) {
          uni.showToast({
            title: this.$t('复制成功'),
            duration: 1000
          });
        }
      });
    },
    getRoleOrderInfo() {
      this.$http
        .getRoleOrderInfo({
          order_num: this.order_num
        })
        .then(res => {
          if (res.status == 200) {
            this.$loading();
            this.orderInfo = res.data;
            setTimeout(res => {
              this.$hideLoading();
            }, 500);
          }
        });
    }
  }
};
</script>

<style lang="less">
.shou_sure {
  span {
    display: block;
    // width: 100upx;
    height: 40upx;
    padding: 0 20upx;
    line-height: 40upx;
    border-radius: 20upx;
    border: 1upx solid #999;
    color: #999;
    text-align: center;
    font-size: 24upx;
  }
}
.order-list-info {
  > view {
    text:nth-child(2) {
      display: block;
      flex: 1;
      text-align: left;
    }
    text:nth-child(1) {
      display: block;
      width: 30%;
      text-align: left;
    }
  }
}
</style>
